@charset "utf-8";
html {
    font-size: 12px;
}

body {
    font-family: 'microsoft yahei';
    //    background: url(../images/blue.jpg);
    //    background-size: 100% 100%;
    //    background-attachment: fixed;
}

.btn {
    font-weight: normal;
}

a {
    text-decoration: none;
    font-size: 12px;
}


/*
*    用户头像
*/

.userImg {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: 5px;
    overflow: hidden;
    position: relative;
    img {
        border: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
    >.userstatus {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        left: 70%;
        bottom: 5px;
        &.online {
            background-color: aquamarine;
        }
        &.offline {
            background-color: darkgrey;
        }
    }
}

.message-badge {
    background-color: #d9534f;
}

.wrap {
    margin-top: 54px;
    position: relative;
}

.wrap .sidebar {
    width: 180px;
    position: fixed;
    left: 0;
    top: 54px;
    bottom: 0;
    border-right: 1px solid #ddd;
    background-color: #f1f1f1;
    overflow-y: auto;
    box-sizing: border-box;
}

.wrap .sidebar nav > ul > li {
    >a {
        color: #666;
        text-decoration: none;
        display: block;
        padding: 10px 10px;
        font-size: 14px;
        border-bottom: 1px solid #ddd;
        >.fa {
            margin-right: 5px;
        }
    }
    >ul {
        display: none;
        >li {
            >a {
                display: block;
                padding: 5px 25px;
                >.fa {
                    margin-right: 5px;
                }
            }
        }
    }
    &.active {
        >ul {
            display: block;
            >li {
                >a {
                    text-decoration: none;
                    &:hover {
                        background-color: #e7e7e7;
                    }
                }
            }
        }
    }
}

.wrap .sidebar nav ul li >ul li a {
    font-size: 12px;
}

.wrap > .main-wrap {
    position: absolute;
    left: 180px;
    top: 15px;
    right: 0;
    bottom: 0;
    .container-fluid {
        .cards {
            .card-container {
                position: relative;
                min-height: 80px;
                margin-bottom: 20px;
                .card {
                    padding: 20px;
                    .media-left,
                    .media-heading {
                        color: #ffffff;
                    }
                    &.front {
                        background-color: #d9544f;
                        color: white;
                    }
                    &.back {
                        background-color: #418bca;
                        color: white;
                    }
                }
            }
        }
    }
}